<script lang="ts" setup>
import { ref, watch } from "vue";

const props = defineProps({
  objName: {
    type: String,
    required: true,
  },
  name: {
    type: String,
  },
  value: {
    type: String,
  },
  status: {
    type: Boolean,
    required: true,
  },
});

const emit = defineEmits(["changeVal"]);
const inputValue = ref("");

watch(
  () => props.status,
  (newVal) => {
    // console.log("watch", props.name, inputValue.value);

    if (!newVal && props.value !== inputValue.value)
      emit("changeVal", props.objName, inputValue.value);
    else {
      inputValue.value = props.value || "";
    }
  }
);
</script>
<template>
  <div class="flex md:pl-20 mb-5 items-center h-8">
    <span class="text-sm mr-1">{{ props.name }}</span>
    <span class="mr-5">:</span>
    <a-input v-model:value="inputValue" :placeholder="props.name" class="w-50" v-if="props.status" />
    <span class="text-sm" v-else>
      {{ props.value || "-" }}
    </span>
  </div>
</template>
<style lang="scss" scoped></style>
